<!--客户开发计划列表页面  ————————  客户经理和销售主管可查看-->
<template>
  <div class="CustomerDevelopmentPlanList">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">营销管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户开发计划</strong><span>/</span></li>
        <li><strong>客户开发计划列表</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">客户开发计划列表</span>
          <!--        <button></button>-->
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>客户名字</th>
            <th>联系人</th>
            <th>联系人电话</th>
            <th>指派给</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(salesChance,index) in salesChances">
            <th scope="row">{{ index+1+(current-1)*limit}}</th>
            <td>{{ salesChance.customerName}}</td>
            <td>{{ salesChance.contactsName}}</td>
            <td>
              {{ salesChance.contactsTel1}}
            </td>
            <td>{{ salesChance.staffName}}</td>
            <td>
              <button v-on:click="toCreateDevelopmentPlan(salesChance.saleId)" class="btn btn-info btn-sm">制定计划</button>
              <button v-show="role=='客户经理'||role=='老板'" v-on:click="toImplementDevelopmentPlan(salesChance.saleId)" class="btn btn-primary btn-sm">执行计划</button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="block text-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "DevelopmentPlanList",
  data(){
    return{
      currentPage: 1,
      limit:10,
      current:1,
      total:0,
      salesChances:[],
      role:'',
    }
  },
  methods:{
    toCreateDevelopmentPlan(saleId){
      this.$router.push({path:'/MemuBar/CreateDevelopmentPlan',query:{saleId:saleId}})
    },
    toImplementDevelopmentPlan(saleId){
      this.$router.push({path:'/MemuBar/ImplementDevelopmentPlan',query:{saleId:saleId}})
    },
    loadSales() {
      this.role = localStorage.getItem("role")
      if (this.role=='老板'||this.role=='销售主管'){
        this.$axios.get('/sale/loadAllAssignedSales',{
          params:{
            limit:this.limit,
            current:this.current
          }
        }).then(
          res=>{
            this.salesChances=res.data.data.myData
            this.total=res.data.data.total
          }
        )
      }
      if (this.role=='客户经理'){
        this.$axios.get('/sale/loadAllAssignedSalesByAccountManager',{
          params:{
            limit:this.limit,
            current:this.current,
            staffId:this.$store.getters.getStaff.staffId
          }
        }).then(
          res=>{
            this.salesChances=res.data.data.myData
            this.total=res.data.data.total
          }
        )
      }

    },
    handleSizeChange(val) {
      this.limit = val;
      this.loadSales()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadSales()
    },
  },
  created() {
    this.loadSales()
  }
}
</script>

<style scoped>

</style>
